<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<link href="new_file.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="box1">hello box1</div>
		<div class="box2">hello box2</div>
		<div class="wbox">
			<div class="nbox"></div>
		</div>
	</body>
</html>
<!-- css部分
*{
	/*通配符:指所有标签*/
	margin: 0;
	padding: 0;
}


.box1{
	width: 400px;
	height: 300px;
	background-color: purple; /*背景颜色*/
	color: red;
	font-size: 36px;
	margin-bottom: 80px;
	/*margin-top: 50px;
	margin-left: 100px;*/
	/**/
	margin: 50px auto;
}
.box2{
	width: 600px;
	height: 300px;
	background-color: purple;
	font-size: 36px;
	margin-top: 120px;
	/* 块级盒子水平居中显示,给盒子的左右外边距设置为auto 前提条件：设置宽*/
	margin: auto;
	margin-bottom: 200px;
}
/*1.相邻两个盒子之间外边距合并:只给其中一个盒子设置外边距
  2.嵌套盒子之间外边距的塌陷:给父盒子家边框 给父盒子加内边距padding 给父盒子加overflowd: hidden
  3.给父盒子加overflow：hidden*/
.wbox{
	width: 600px;
	height: 600px;
	background-color: aqua;
	margin-top: 100px;
	margin: auto;
	/*border: 1px solid red;*/
	padding-top: 100px;
	/* overflow: hidden; */
}
.nbox{
	width: 300px;
	height: 300px;
	background-color: blueviolet;
	margin: auto;
	/* margin-top: 100px; */
} -->